<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/url.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../css/public.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="heart ng-scope" ng-controller="HeartForm">
                <div class="logo" @click="goHome">
                    <img src="../image/index/logo.png" alt="" style="width: 123px;height: 59px;margin-top: 8px;">
                    <div style="width: 1px;
                    height: 24px;
                    background: #333333;
                    margin-top: 7%;
                    margin-right: 9px;"></div>
                    <div>留学大数据，智能选校专家</div>
                </div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" menu-trigger="click">
                    <el-submenu index="1">
                        <template slot="title">产品</template>
                        <div class="chanpin">
                            <ul class="unav">
                                <li :class="[activenavliIndex==0?'activenavli':'']" @click="unavclcik(0)">全球院校库</li>
                                <li :class="[activenavliIndex==1?'activenavli':'']" @click="unavclcik(1)">智能选校系统</li>
                            </ul>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==0">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    全球院校库</div>
                                <div class="lcontent">
                                    <div>
                                        <ul>
                                            <li>北美</li>
                                            <li>美国院校库</li>
                                            <li>加拿大院校库</li>
                                        </ul>
                                        <ul>
                                            <li>英爱</li>
                                            <li>英国院校库</li>
                                            <li>爱尔兰院校库</li>
                                        </ul>
                                        <ul>
                                            <li>澳新</li>
                                            <li>澳大利亚院校库</li>
                                            <li>新西兰院校库</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <ul>
                                            <li>港新</li>
                                            <li>香港院校库</li>
                                            <li>新加坡院校库</li>
                                        </ul>
                                        <ul>
                                            <li>东南亚</li>
                                            <li>马来西亚院校库</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <ul>
                                            <li>欧洲</li>
                                            <li>荷兰院校库</li>
                                            <li>意大利院校库</li>
                                            <li>西班牙院校库</li>
                                            <li>丹麦院校库</li>
                                            <li>法国院校库</li>
                                            <li>德国院校库</li>
                                            <li>比利时校库</li>
                                            <li>瑞典校库</li>
                                            <li>芬兰校库</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==1">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    智能选校系统</div>
                                <div class="lcontent">
                                    <div>
                                        <ul>
                                            <li style="font-size: 14px !important">港新院校库</li>
                                            <li>英国院校库</li>
                                            <li>美国院校库</li>
                                            <li>英国艺术院校库</li>
                                            <li>澳大利亚院校库</li>
                                            <li>马来西亚院校库</li>
                                            <li>爱尔兰校库</li>
                                            <li>新西兰校库</li>
                                            <li>英国Top up校库</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-submenu>
                    <el-menu-item index="2">会员</el-menu-item>
                    <el-menu-item index="3">套餐</a></el-menu-item>
                    <el-menu-item index="4">合作</a></el-menu-item>

                </el-menu>
                <!-- <div class="userInfo">
                    <div class="user" id="uesr_touch">
                        <div class="user" id="uesr_touch">
                            <div class="userAvatar">
                            </div>
                            <div class="userInformation">
                                <div class="userName">测试账号</div>
                                <div class="company">昆山开发区营商服务平台</div>
                            </div>
                        </div>
                    </div>
                </div> -->
                <div class="user_box" id="user_box">
                    <div v-if="isLogin">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <img src="../image/index/header.png" alt=""
                                    style="width: 33px;height: 33px; vertical-align: middle;margin-right: 8px;">
                                星辰大海<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user" @click.native="goUser">个人中心</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-layout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else @click="login"><img src="../image/index/user.png" alt=""
                            style="width: 22px;vertical-align: middle;"> 登录/注册</div>
                </div>

                <div class="layui-row layui-col-space30 layui_message_box" id="message_box"
                    style="left: 981px; top: 50px; display: none;">
                    <div class="layui-col-xs9 layui-col-md3">
                        <div class="layui-panel layui-card-header"
                            style="width: 250px; height: 40px; border-bottom: 1px solid #dbd8d8; font-weight:700;text-align:center; ">
                            最近消息</div>
                        <div class="layui-panel" style="width:250px; ">
                            <ul class="layui-menu" id="docDemoMenu1">
                                <!-- ngRepeat: item in message -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '1',
                activenavliIndex: 0,
                titleList: ['会员', '套餐', '合作'],
                isLogin: false,
            }
        },
        methods: {
            unavclcik(index) {
                console.log(index);
                this.activenavliIndex = index
            },
            login() {
                window.location.href = "../html/login.html"
            },
            goHome() {
                window.location.href = '../html/index.html'
            },
            goUser() {
                window.location.href = '../html/user.html'
            },
        }
    })
</script>

</html>